<template>
    <section class="assessmentIndex">
        <div class="root" v-if="!isIndexItem" v-loading="pageLoad">
            <div v-for="(item,index) in list" class="first-level-content handle-icon" :label="item.quotaName" :name="item.quotaName">
                <el-row style="min-height: 48px;margin: 10px 0">
                    <el-col :span="4" v-show="!isJudge">&nbsp;</el-col>
                    <el-col :span="6">
                        {{item.quotaName}}
                    </el-col>
                    <el-row v-for="(subItem,subIndex) in item.kpiTownQuotas" style="margin-bottom: 5px">
                        <el-col v-show="subIndex !== 0 && !isJudge" :span="4">&nbsp;</el-col>
                        <el-col v-show="subIndex !== 0" :span="6">&nbsp;</el-col>
                        <el-col :span="6">
                            <span style="flex-basis: 250px;display: flex">
                            <div style="flex-basis: 280px">
                                <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入内容"
                                    :disabled="!isEdit"
                                    v-model="subItem.quotaName">
                                </el-input>
                            </div>
                            <span>
                                <i v-show="!isJudge && isEdit" class="el-icon-remove-outline" @click="delItem(index,subIndex)"></i>
                            </span>
                        </span>
                        </el-col>
                        <el-col :span="4">
                            <el-input v-model="subItem.score" type="number" :disabled="!isEdit" size="large" class="score-content" :min="1" :max="40"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button :disabled="isJudge || !isEdit" v-show="firstLevelType === '02' && !isJudge" size="large" type="primary" @click="showWeightModal(subItem)">设置权重</el-button>
                            <el-button v-show="isJudge" size="large" type="primary" @click="showWeightModal(subItem)">打分</el-button>
                        </el-col>
                    </el-row>
                    <el-col :span="24">
                        <i v-show="!isJudge && isEdit" style="position: relative" class="el-icon-circle-plus-outline" @click="addList(index)"></i>
                    </el-col>
                </el-row>
            </div>
            <el-row>
                <el-button v-show="isJudge || isEdit" size="small" type="primary" style="margin: 10px 0 0 0;float: right" @click="submit()">保存</el-button>
            </el-row>
        </div>
        <div class="index-item" v-if="isIndexItem">
            <el-row>
                <el-col :span="4" style="font-size: 14px;font-weight: bold">{{title}}</el-col>
                <el-col :span="20">
                    <el-row v-for="(item,index) in list" class="second-tr">
                        <el-col :span="8">
                            {{item.quotaName}}
                        </el-col>
                        <el-col :span="16">
                            <el-row v-for="(subItem,subIndex) in item.kpiTownQuotas" class="third-tr">
                                {{subItem.quotaName}}
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>

<!--            <span v-for="(item,index) in list" :label="item.quotaName" :name="item.quotaName">-->
<!--                <span>{{item.quotaName}}</span>-->
<!--                <span v-for="(subItem,index) in item.kpiTownQuotas">-->
<!--                    <span>{{subItem.quotaName}}</span>-->
<!--                </span>-->
<!--            </span>-->
        </div>
        <el-dialog
            :visible.sync="weightVis"
            :append-to-body="true"
            :title="isJudge?'打分':'权重设置'">
            <div v-for="grandItem in currentSubItem.kpiVillageQuotas" style="width: 130px;display: inline-block;text-align: center;">
                <h3 style="margin: 10px 0">{{grandItem.districtName.replace(/支部/,'')}}</h3>
                <el-input v-show="!isJudge && !isReviewed" :disabled="!isEdit" size="large" class="score-content" v-model="grandItem.weight"></el-input>
                <el-input v-show="isJudge && !isReviewed" @change="(val) => { grandItem.scoreEnd = val * grandItem.weight}" size="large" class="score-content" v-model="grandItem.score"></el-input>
                <el-input v-show="isReviewed" disabled size="large" class="score-content" v-model="grandItem.scoreEnd"></el-input>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    export default {
        name: "AssessmentIndex",
        props: {
            firstLevelType: {
                type: String,
                default: "01"
            },
            isDailyReview: {
                type: Boolean,
                default: false
            },
            currentTask: {
                type: Object
            },
            isEdit: {
                type: Boolean
            },
            isJudge: {
                type: Boolean,
                default: false
            },
            districtId: {
                type: String
            },
            isReviewed: {
                type: Boolean,
                default: false
            },
            indexLook:{
                type:Boolean,
                default:false,
            },
            isIndexItem: {
                type: Boolean,
                default: false
            },
            title: {
                type: String,
                default: ''
            }
        },
        watch: {
            'districtId': {
                handler: function () {
                    if (this.districtId) {
                        this.showData(this.districtId, this.firstLevelType)
                    }
                }
            }
        },
        data(){
            return{
                list:[],
                list1:[],
                districtList:['宝华村','和平村','宝华村1','和平村1','宝华村2','和平村2','宝华村3','和平村3','宝华村4','和平村4',],
                user:{},
                pageLoad:false,
                tempObj:{quotaName:'1',kpiTownQuotas:[{parentQuotaName:'2',score:'10',kpiVillageQuotas:[{districtName: '村', weight: '权重'},{districtName: '村', weight: '权重'},]}]},
                currentSubItem: {},
                weightVis: false,
            }
        },
        methods:{
            addList(index){
                let tempCun = [];
                this.list[0].kpiTownQuotas[0].kpiVillageQuotas.forEach(item=>{
                    tempCun.push({districtName: item.districtName, weight: item.weight ,districtId:item.districtId})
                });
                this.list[index].kpiTownQuotas.push({districtId: this.user.districtId, districtName:  this.user.districtName, parentQuotaName:'',score:0,kpiVillageQuotas:tempCun})
            },
            delItem(index,subIndex){
                this.list[index].kpiTownQuotas.splice(subIndex,1)
            },
            orderScroll(e) {
               let r = document.querySelectorAll('.village-score');
               r.forEach(item => {
                   item.scrollLeft =  e.target.scrollLeft;
               })
            },
            showData(districtId, firstLevelType){
                let param = {districtId: districtId, parentQuotaId: firstLevelType};
                if (this.isDailyReview) {
                    param.quarter = this.currentTask.taskQuarter;
                };
                if(this.indexLook){
                    param.quarter = "第一季度";
                }
                this.$http('post',`identity/kPITownQuota/getAll`, param, false).then(data=>{
                    this.list = [];
                    this.list = data;
                })
            },
            submit(){
                this.pageLoad = true;
                if (this.isJudge) {
                    let tempArr = [];
                    this.list.forEach(item => {
                        item.kpiTownQuotas.forEach(subitem => {
                            tempArr = tempArr.concat(subitem.kpiVillageQuotas)
                        })
                    });
                    this.$http('post',`identity/kPITownQuota/updateStatisticsQoutaScore`, tempArr, false).then(data=>{
                        this.pageLoad = false;
                        if (data) {
                            this.$message({
                                type: 'success',
                                message: '保存成功！'
                            })
                        }
                    }).catch(()=>{
                        this.pageLoad = false;
                    })
                } else {
                    this.$http('post',`identity/kPITownQuota/addAll`, this.list, false).then(data=>{
                        this.pageLoad = false;
                        if (data) {
                            this.$emit("saveFinish", this.districtId);
                            this.$message({
                                type: 'success',
                                message: '保存成功！'
                            })
                        }
                    }).catch(()=>{
                        this.pageLoad = false;
                    })
                }
            },
            showWeightModal(subItem) {
                this.currentSubItem = subItem
                this.weightVis = true;
            }
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            if (this.user.sysDistrict.districtLevel === 2) {
                this.showData(this.user.districtId, this.firstLevelType);
            }else {
                this.showData(districtId, this.firstLevelType)
            }
        }
    }
</script>

<style>
    .assessmentIndex .vs-input--input{
        width: 100px!important;
        height: 50px;
    }
    .assessmentIndex .vs-con-input-label{
        width: 100px!important;
    }
    .first-level-content {
        padding: 0;
        text-align: center;
        border: 1px solid #ebebeb;
        border-radius: 4px;
        margin: 2px 0;
    }
    .first-level-content .el-input--mini .el-input__inner {
        width: 60px!important;
    }
    .assessmentIndex .el-input-number.is-controls-right .el-input-number__decrease, .assessmentIndex .el-input-number.is-controls-right .el-input-number__increase {
        width: 20px;
    }
    .assessmentIndex .el-input-number.is-controls-right .el-input__inner {
        padding: 0 5px !important;
    }
    .score-content input[type="number"] {
        height: 49px;
    }
</style>

<style scoped>
    span {
      /*  border: 1px red solid;*/
        vertical-align: top;
    }
    .village-score {
        flex-basis: 1000px;
        display: inline-block;
        overflow-x: hidden;
        line-height: 70px;
    }
    .actual-container {
        text-align: left;
        float: left;
    }
    .score-content {
        width: 70px;
    }
    .handle-icon i {
        font-size: 20px !important;
        margin: 12px 4px;
    }
    .handle-icon i:hover {
        color: #1f74ff;
        cursor: pointer;
    }
    .index-item {
        text-align: left;
        font-size: 12px;
        border: 1px solid #ececec;
        margin: 5px 0;
        border-radius: 5px;
    }
    .second-tr {
        font-size: 14px;
        font-weight: bold;
        border-left: 1px solid #ececec;
        border-bottom:  1px solid #ececec;
        padding-left: 2px;
    }
    .third-tr {
        margin-bottom: 5px;
        border-left: 1px solid #ececec;
        padding: 0 4px;
        display: inline-block !important;
    }
</style>
